<template>
  <div id="recorddialog">
    <commonformdialog :isshowDialogs="isshowDialog" :isshowconfirmbtn="false" :dialogWidth="'25%'" :enterTitle="false"
      :isshowimportTitle="false" :dialogTitle="`录入约考-${titlename}`" @closetextDialog="closetextDialog" @confirmbtn='confirmbtn'
      >

      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
        <el-form-item label="约考科目" prop="subject">
          <el-select v-model="formData.subject" placeholder="请选择约考科目" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in subOption" :key="index" :label="item.label" :value="item.value"
              ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="约考车型" prop="car_type">
          <el-select v-model="formData.car_type" placeholder="请选择约考车型" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in carTypeList" :key="index" :label="item.title" :value="item.id"
             ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="约考场地" prop="car_type">
          <el-select v-model="formData.exam_place_id" placeholder="约考场地" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in placeList" :key="index" :label="item.title" :value="item.id"
             ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="约考场次" prop="exam_session">
          <el-input v-model="formData.exam_session" placeholder="请输入约考场次" clearable :style="{width: '100%'}">
        
          </el-input>
        </el-form-item>
        <el-form-item label="约考时间" prop="commit_time">
          <el-date-picker v-model="formData.commit_time" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{width: '100%'}"
            placeholder="请选择约考时间" clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="考试时间" prop="exam_time">
          <el-date-picker v-model="formData.exam_time" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{width: '100%'}"
            placeholder="请选择考试时间" clearable></el-date-picker>
        </el-form-item>
      </el-form>

    </commonformdialog>
  </div>
</template>

<script>
  //引入弹窗
  import commonformdialog from '@/components/commondialog/commondialog'
  //api
  import { getSessionStorage } from '@/utils/accessToken'
  import {achievementcreate,examOptionrelation,studentInputexamhistory} from '@/api/student'
  export default {
    data() {
      return {
        //是否禁用科目选项
        issubdisable:false,
        //标题名字
        titlename: '',
        //学员id
        studentId: '',
        //表格数据
        formData: {
          subject: '',
          car_type: '',
          exam_session: '',
           exam_place_id:'',
          commit_time: '',
          exam_time: '',

        },
        rules: {
          subject: [{
            required: true,
            message: '请选择约考科目',
            trigger: 'change'
          }],
          car_type: [{
            required: true,
            message: '请选择约考车型',
            trigger: 'change'
          }],
          exam_session: [{
            required: true,
            message: '请输入约考次数',
            trigger: 'blur'
          }],
          exam_place_id: [{
            required: true,
            message: '请选择约考场地',
            trigger: 'blur'
          }],
          commit_time: [{
            required: true,
            message: '请选择约考时间',
            trigger: 'blur'
          }],
          exam_time: [{
            required: true,
            message: '请选择考试时间',
            trigger: 'blur'
          }]
        },
        placeList:[],
        carTypeList:[],
        subOption: [{
          "label": "科目一",
          "value": 1,

        }, {
          "label": "科目二",
          "value": 2,

        }, {
          "label": "科目三",
          "value": 3,

        }, {
          "label": "科目四",
          "value": 4,

        }],
      }
    },
    components: {
      commonformdialog,
    },
    props: {
      //是否显示弹窗
      isshowDialog: {
        type: Boolean,
        default: false,
      },
      //点击传递的参数
      dialogparams: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    methods: {
      //关闭弹窗
      closetextDialog() {
        this.$refs['elForm'].resetFields()
        this.$emit('closetextDialog')
      },
      //
     async getexamOptionrelation(){
       let data=await examOptionrelation()
       this.placeList=data.data
     },
      //点击确认
      confirmbtn() {
        this.$refs['elForm'].validate( async valid => {
          if (!valid) return
          let params = this.formData
          params.student_id=this.studentId
          let data = await studentInputexamhistory(params)
          if(data.code=='0000'){
             this.$message.success('录入成功！')
             this.$emit('confirm')
             this.$refs['elForm'].resetFields()
          }
        })

      }
    },
    mounted() {
      this.carTypeList = getSessionStorage('Options')[1]
      this.getexamOptionrelation()
    },
    watch: {
      dialogparams(val) {
        this.titlename = val.name
        this.studentId = val.id
      }
    }
  }
</script>

<style scoped lang='scss'>
::v-deep{
  input[type=number] {
      -moz-appearance:textfield;
  }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }
}
</style>
